<template>
  <div class="validate-container">
    <div class="validate-content">
      <div v-for="(item, index) in valueList" :key="index" class="validate-item">
        <ToolTip v-if="handelName(item).length >= 12" :content="handelName(item)" class="name" @click.native="editData(index, item)" />
        <div v-else class="name ellipsisOne" @click="editData(index, item)">{{ handelName(item) || '--' }}</div>
        <div class="icon-list">
          <!-- <i class="el-icon-document-copy icon" @click="copy(item)"/>
          <i class="el-icon-delete icon" @click="deleteItem(index)"/> -->
          <img :src="copyIcon" class="icon" alt="" @click="copy(item)">
          <img :src="deleteIcon" class="icon" alt="" @click="deleteItem(index)">
        </div>

      </div>
    </div>
    <div><PlainCreateBtn :show-icon="false" class="add-btn" @click="addItem()">{{ type===1?'添加校验条件':'添加条件' }}</PlainCreateBtn></div>
    <!-- 表单验证 -->
    <FilterDialog v-if="type === 1" ref="filterDialogRef" :all-field-list="allFieldList" :field-condition="valueList" :field-list="fieldList" :type="type" @submit="submit" />
    <!-- 组件显示 -->
    <ElementFilterDialog v-else ref="filterDialogRef" :all-field-list="allFieldList" :field-condition="valueList" :field-list="fieldList" :type="type" @submit="submit" />
  </div>
</template>

<script>
import FilterDialog from './filterDialog.vue';
import ElementFilterDialog from './elementFilterDialog.vue';
import { showModal } from '@/utils/message';
import deleteIcon from '@/assets/legalProcess/deleteIcon.png';
import copyIcon from '@/assets/legalProcess/copyIcon.png';
export default {
  name: 'CommonValidate',
  components: { FilterDialog, ElementFilterDialog },
  model: {
    prop: 'valueList',
    event: 'changeValue'
  },
  props: {
    valueList: {
      type: Array,
      default: () => ([])
    },
    type: { // 1: 表单验证 2:组件显示
      type: Number,
      default: 1
    },
    fieldList: {
      type: Array,
      default: () => ([])
    },
    allFieldList: {
      type: Array,
      default: () => ([])
    },
    keyToName: { // 为了减少遍历，这里存储了 Map(key -> name) 的数据结构
      type: Map,
      default: null
    }
  },
  data() {
    return {
      deleteIcon, copyIcon
    };
  },
  methods: {
    submit(editIndex = -1, data) {
      if (editIndex > -1) {
        this.$set(this.valueList, editIndex, data);
      } else {
        this.valueList.push(data);
      }
      this.changeValue();
    },
    addItem(cloneData) {
      if (this.valueList.length >= 20) {
        this.$message.warning('最多添加20个条件');
        return;
      }
      this.$emit('freshData');
      this.$refs.filterDialogRef.openDialog(-1, cloneData);
    },
    copy(data) {
      const cloneData = _.cloneDeep(data);
      if (this.type === 2) {
        cloneData.fieldList = [];
      }
      this.$emit('freshData');
      this.addItem(cloneData);
    },
    deleteItem(index) {
      showModal('请确认是否删除该条件').then(() => {
        this.valueList.splice(index, 1);
        this.changeValue();
      });
    },
    editData(index, data) {
      this.$emit('freshData');
      this.$refs.filterDialogRef.openDialog(index, data);
    },
    changeValue() {
      this.$emit('changeValue', this.valueList);
    },
    handelName(item) {
      if (this.type === 1) {
        return item.name || item.accordName;
      }
      let val = '';
      item.fieldList.forEach(key => {
        let name = '';
        // 通过 keyToName 映射结构，减少循环次数
        if (this.keyToName && this.keyToName.has(key)) {
          name = this.keyToName.get(key);
        } else {
          const item = this.fieldList.find(element => key === element.key);
          if (item) name = item.name;
        }
        if (name) val += `${val ? ',' : ''}${name}`;
      });
      return val;
    }
  }
};
</script>

<style lang="scss" scoped>
.add-btn {
  width: 240px;
}
.validate-item {
  display: flex;
  .name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
  }
  &::v-deep {
    .ellipsisOne {
      color: #406EFF;
      text-decoration: underline;
    }
  }
}
.ml10 {
  margin-left: 10px;
}
.delete-btn {
  cursor: pointer;
  color: #192452;
  font-size: 14px;
  white-space: nowrap;
}
.icon {
  margin-left: 10px;
  width: 13px;
  cursor: pointer;
}
.icon-list {
  display: flex;
  align-items: center;
}
.bold {
  font-weight: bold;
}
</style>
